<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 300px;
        height: 200px;
        background-color: lightcoral;
        position: relative;
      }
      /* div::before {
        content: "123";
        color: red;
        font-size: 30px;
      } */

      /* div:hover::before {
        content: "";
        position: absolute;
        width: 30px;
        height: 6px;
        background-color: blue;
        left: 50%;
        bottom: 20px;
        transform: translateX(-50%);
      } */

      /* div::after {
        content: "abc";
      } */

      div::first-letter {
        color: green;
        font-size: 30px;
        float: left;
      }

      /* div::first-line {
        color: green;
      } */

      /* div::selection {
        color: red;
        background-color: green;
      } */

      /* input[type="text"]::placeholder {
        color: red;
      } */
      /* input:first-of-type::placeholder {
        color: red;
      } */
      /* input[placeholder="请输入用户名"]::placeholder {
        color: red;
      } */
      /* input:nth-child(2)::placeholder {
        color: red;
      } */
      div + input::placeholder {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素
    </div>
    <input type="text" placeholder="请输入用户名" />
    <input type="password" placeholder="请输入密码" />
  </body>
</html>

<!-- 
  伪元素选择器
    用css的形式去写页面的元素

    E::before 在E标签的里面的最前面添加一个元素
    必须要有content属性表示内容
    其他的属性和其它的css一样

    最常见的就是用来做一些高亮的效果


    E::after 在E标签的里面的最后面添加一个元素
    E::first-letter 选中标签里面的第一个文字
    E::first-line  选中标签里面的第一行文字
    E::selection  表示当鼠标选中时文字颜色和背景颜色
    E::placeholder  修改input框的提示文字的样式

 -->
